<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="套卷练习" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" title="套卷分类">
        <van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
          <template #content>
            <van-cell v-if="active === 0"></van-cell>
            <van-cell v-if="active === 1">数学</van-cell>
            <van-cell v-if="active === 2">初三化学</van-cell>
            <van-cell v-if="active === 3">小学英语</van-cell>
          </template>
        </van-tree-select>
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="套卷分类">
        <van-cell v-for="(item,index) in list" :key="item" :class='{show:active===index}' :title="item" @click="jump(index)"/>
      </van-dropdown-item>
    </van-dropdown-menu>

    <div class="img">
      <van-empty description="请稍后，套卷正在赶来的路上啦" />
    </div>
  </div>
</template>

<script>
import { cyjcart } from "../../utils/http";
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      active: 0,
      items: [
        { text: "全部" },
        { text: "中考真题" },
        { text: "化学" },
        { text: "英语" }
      ],
      list: ["全部", "已做", "未做"],
      
    };
  },
  created() {},
  mounted() {
    this.getLeft();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/exercise");
    },
    //获取套卷分类
    async getLeft() {
      const res = await cyjcart();
      console.log(res);
    },
    jump(index) {
     this.active = index
    }
  }
};
</script>

<style scoped>
.show{
  color:orange;
}
</style>
